<template>
<div class="quanju">
   <div class="header-v1">
      <div class="top-main">
        <div class="logo1" style="display:table">
          <a href="#" style="display:table-cell;vertical-align:middle">
            <img src="../assets/image/logo.png" alt="" style="height:80px;display:inline-block">
          </a>
        </div>
        <!--<a href="#" class="languages"><img src="../assets/image/top_pic2.png" alt=""></a>-->
        <div class="top_search"><em></em>
          <div class="search_con">
          </div>
        </div>


     <div class="top-main-content">
       <div class="navBar">
         <ul class="nav clearfix">
           <li class="m" @click="clshow1(1)"><h3><a href="#" :class="{blue:i===1}" >首页</a></h3></li>

           <li class="m" @click="clshow2(2)"><h3><a href="#" :class="{blue:i===2}">新闻中心</a></h3>
            </li>
           <li class="m" @click="clshow3(3)"><h3><a href="#" :class="{blue:i===3}">产品展示</a></h3>
           </li>
           <li class="m" @click="login"><h3><a href="#">产品中心</a></h3>
           </li>
           <li class="m" ><h3><a href="http://cnhjyy.com">华杰商城</a></h3>
           </li>
           <li class="m" @click="clshow4(4)"><h3><a href="#" :class="{blue:i===4}">联系我们</a></h3>
           </li>

         </ul>
       </div>
     </div>

      </div>
   </div>
  <div class="i-warp">
    <div class="lunbo">
      <el-carousel style="margin-top: 117px;"   :interval="5000" :height="dataHeight"  arrow="always">
        <el-carousel-item v-for="(item,index) in BannerImg">
          <img src="../assets/image/572ff1229fee20f.jpg" v-if="index == 0"  class="bannerImg" />
          <img src="../assets/image/518d5c3e26de187d.jpg" v-if="index == 1" class="bannerImg" />
          <img src="../assets/image/856593c5930d5ea9.jpg" v-if="index == 2" class="bannerImg" />
          <img src="../assets/image/154f8b95bf9d4989.jpg" v-if="index == 3" class="bannerImg" />

        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="bottommain">
    <div class="context">
      <h2 ></h2>
    </div>
      <!--首页-->
    <div v-if="show1">
    <div class="neirong">

        <div class="mainnr">
          <div class="mainleft">
             <img style="width: 493px;height: 333px" src="../assets/image/1589992410.jpg">
          </div>
          <div class="mainright">
            <span style="text-align: center;color: #5a5e66;font-family: 华文新魏"><h2>公司概况</h2></span>
            <ul>
              <li>
                <p>
                  邓州市医药有限公司成立于1956年9月，是邓州市委、市政府管理的一级单位。公司现有干部职工520人，公司内设综合办公室、人事科、财务科、质管科、企管科、业务科、保卫科等七个科室。
                </p>
              </li>
              <li>
                <p>
                  下设药品配送中心1个、药品零售门店186家，经营网点遍布城乡，是保障全市180万人民群众用药需求的国有企业。
                </p>
              </li>
              <li>
                <p>
                公司秉承“以人为本、和而不同”的企业发展理念，倾力打造一个融合、 友爱、进取的发展环境，夯实公司跨越式发展的基础。
                </p>
              </li>
              <li>
                <p>
                  公司十分重视产品质量和售后服务，一直本着“以人为本、以诚取信、以质取胜、以新争天下”的质量方针和“正正直直做人，踏踏实实做事”的企业精神。
                </p>
              </li>
            </ul>
          </div>
          <div class="mainright">
            <span style="text-align: center; color: #5a5e66;font-family: 华文新魏"><h2>经营范围</h2></span>
            <ul>
              <li>
                <p>
                  中成药、化学药制剂、抗生素、生化药品、生物制品（除疫苗）、诊断药品 、中药材、中药饮片、 医疗器械、 保健食品。
                </p>
              </li>
              <li>
                <p>
                  化妆品、卫生用品、日用品、体外诊断试剂、百货、玩具、小针织、家用电器、健身器材、钟表、塑料制品、预包装食品、散装食品、奶粉销售
                </p>
              </li>
            </ul>
          </div>
        </div>
    </div>
      <div class="neirong">
        <div class="mainnr">
          <div class="mainleft">
            <img style="width: 493px;height: 333px" src="../assets/image/1590159896.jpg">
          </div>
        </div>
      </div>
      </div>
      <!-- 新闻中心-->
    <div v-if="show2">
      <div class="imglist" @click="showNewsInfo(news)"  v-for="news in newsList">
        <img  style="height: 200px;width: 200px" :src="news.img"><br/>
        <br/>
        <span style="font-family: 微软雅黑">{{news.title}}</span>

      </div>
      <div class="block" style="text-align: center;margin-bottom: 30px">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="queryParams1.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams1.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total1">
        </el-pagination>
      </div>
      <el-dialog :title="title" :visible.sync="newsInfoShow" width="1000px"  append-to-body>
        <div v-html="news.newsText" ></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cloneProduct1">关闭</el-button>
        </div>
      </el-dialog>
    </div>
      <!--产品展示-->
    <div v-if="show3" class="show3">
      <div style="padding-left: 70px;padding-right: 70px">
        <!--<el-tag
          v-for="item in drugTypes"
          :key="item.value"
          effect="plain"
          color="transparent">
          {{ item.label }}
        </el-tag>-->
        <el-tabs v-model="editableTabsValue" @tab-click="cliType()" type="card">
          <el-tab-pane
            v-for="item in drugTypes"
            :key="item.value"
            :label="item.label"
          >
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="imglist" @click="showProductInfo(product)" :title="product.adapt" v-for="product in products">
          <img  style="height: 200px;width: 200px" :src="product.pimage"><br/>
        <br/>
        <span style="font-family: 微软雅黑">{{product.shorterName}}</span>

      </div>
      <div class="block" style="text-align: center;margin-bottom: 30px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog :title="title" :visible.sync="productInfoShow" width="1000px"  append-to-body>
        <div v-html="drugs.productInfo" ></div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cloneProduct">关闭</el-button>
        </div>
      </el-dialog>


    </div>
      <!--联系我们-->
    <div v-if="show4">
      <div class="lianxi">
          <h2 style="margin-left: 100px">邓州市医药有限公司</h2>
        <el-row :gutter="10" style="margin-top: 20px">

          <el-col :span="6" style="margin-left: 100px">
            <span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">公司地址：</span>邓州市工业路005号
          </el-col>
          <el-col :span="6" style="margin-left: 100px">
            <span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">所在地区：</span>河南/南阳市
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 20px">

          <el-col :span="6" style="margin-left: 100px">
            <span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">邮政编码：</span>474150
          </el-col>
          <el-col :span="6" style="margin-left: 100px">
            <span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">联系电话：</span>15236063131
          </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 20px">

          <el-col :span="6" style="margin-left: 100px">
            <span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">公司网址：</span><a href="http://www.dzsyiyao.com/">http://www.dzsyiyao.com/</a>
          </el-col>
          <el-col :span="6" style="margin-left: 100px">
            <!--<span style="font-family: 微软雅黑;font-size: 17px;font-weight: bold">联&nbsp;&nbsp;系&nbsp;人：</span>梁李宏 （先生）-->
          </el-col>
        </el-row>
      </div>
      <div class="lxmap">
        <div class="amap-page-container">
          <div :style="{width:'100%',height:'300px'}">
                <el-amap
                  vid="amap"
                   :zoom="zoom"
                   class="amap-demo"
                  :events="events"
                   :center="center">
                  <el-amap-marker
                    vid="marker"
                    :position="marker.position"
                    :label="label"
                  >
                  </el-amap-marker>
            </el-amap>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottoma">
      </div>

      Copyright
      <a href="http://www.beian.miit.gov.cn">邓州市医药有限公司</a>
       版权所有2020-2021 
      <a href="http://www.beian.miit.gov.cn">苏ICP备17036427号-2</a>
      推广电话：15236063131
    </div>
    </div>
  </div>
</div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { getProduct } from "@/api/drugs/drugs";
import { getNewsList } from "@/api/news/news";
import { getDicts } from "@/api/system/dict/data";

export default {
  name: "Home",
  props: {
    dataHeight: {
      type: String,
      default: '654px'
    }
  },
  data() {
    return {
      BannerImg: [0, 1, 2, 3],
      show1: true,
      show2: false,
      show3: false,
      show4: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10

      },
      editableTabsValue:"",
      queryParams1: {
        pageNum: 1,
        pageSize: 10

      },
      drugTypes: [
        {label: '全部',value:"" }
      ],
      products: [],
      newsList:[],
      i: 1,
      productInfoShow: false,
      newsInfoShow:false,
      drugs: {},
      news: {},
      title: '',

      zoom:16,
      total: 0,
      total1: 0,
      center: [112.071218,32.681132],
      loaded: true,
      label:{
        content:'邓州市医药有限公司（东门）',
        offset:[0,-30]
      },
      plugin: [{

        pName:'Geolocation'

      }],
      marker: {
        position: [112.071218,32.681132],

        visible: true,
        draggable: false
      },
      events: {
        click: (e) => {
          this.marker.position = [e.lnglat.lng, e.lnglat.lat]
        }
      },

    }
  },

  created() {
      this.getProduct();
      this.getNewsList();
      this.getDrugType();
  },

  methods: {
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      getProduct(this.queryParams).then(response => {
        this.total = response.total;
        this.products = response.rows;
      });
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      getProduct(this.queryParams).then(response => {
        this.total = response.total;
        this.products = response.rows;
      });
    },
    handleSizeChange1(val) {
      this.queryParams1.pageSize = val;
      getNewsList(this.queryParams1).then(response => {
        this.total1 = response.total;
        this.newsList = response.rows;
      });
    },
    handleCurrentChange1(val) {
      this.queryParams1.pageNum = val;
      getNewsList(this.queryParams1).then(response => {
        this.total1 = response.total;
        this.newsList = response.rows;
      });
    },
    //跳到登录页
    login:function(){
      this.$router.push({ path: "/login" });
    },
    clshow1:function(index){
      this.i = index;
      this.show1 = true;
      this.show2 = false;
      this.show3 = false;
      this.show4 = false;
    },
    clshow2:function(index){
      this.i = index;
      this.show1 = false;
      this.show2 = true;
      this.show3 = false;
      this.show4 = false;
    },
    clshow3:function(index){
      this.i = index;
      this.show1 = false;
      this.show2 = false;
      this.show3 = true;
      this.show4 = false;
    },
    clshow4:function(index){
      this.i = index;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.show4 = true;
    },
    //获取产品列表
    getProduct:function(){
      getProduct(this.queryParams).then(response => {
        this.total = response.total;
        this.products = response.rows;
      });
    },
    //获取新闻列表
    getNewsList:function(){
      getNewsList(this.queryParams1).then(response => {
        this.total1 = response.total;
        this.newsList = response.rows;
      });
    },
    showProductInfo:function(row){
      this.drugs = row;
      this.productInfoShow = true;
      this.title ="产品详情"
    },
    showNewsInfo:function(row){
      this.news = row;
      this.newsInfoShow = true;
      this.title1 ="新闻详情"
    },
    cloneProduct:function () {
      this.productInfoShow = false;
    },
    cloneProduct1:function () {
      this.newsInfoShow = false;
    },
    getDrugType(){
      getDicts("drug_type").then(response => {
        response.data.forEach(v =>{
          let  item = {label: v.dictLabel,value:v.dictValue }
          this.drugTypes.push(item);
        })

      });
    },
    cliType(){
      this.queryParams.pageSize = 10;
      this.queryParams.pageNum = 1;
      this.queryParams.drugType = this.editableTabsValue;
      this.getProduct();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.header-v1{position:fixed;top:0;width:100%;background-color: white;  height:83px; padding-top:3px;z-index:10; }
.header-v1 .top-main{ width:100%;  margin:0 auto;/* position:relative;*/}
.header-v1 .top-main .logo1{ float:left; height:80px; }
.header-v1 .languages{ float:right; position:relative; display:block;font-size:18px; color:#16549e;height:80px;line-height:80px; width:34px; text-align:center; font-weight:bold; font-family:"微软雅黑"; text-decoration:none; text-align:center; margin-left:3px; }
.top_search{ float:right;height:80px; width:34px; position:relative;}
.nav-hide .top_search{ height:99px;}
.top_search .search_con{ display:none;position:absolute; bottom:-56px;right:0px; width:300px; height:0px; padding-top:23px; padding-bottom:19px; z-index:100;/* border:1px solid #eee;box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.2);border-radius: 2px;*/}
.header-v1 .top-main .top-main-content{ float:right;/* margin-top:31px;*/}
.navBar{height:100px;}
.nav{ list-style:none; padding:0;  }
.nav .m{ float:left; border-top:0; border-bottom:0; width:100px; position:relative;}
.nav a:hover{ text-decoration:none; color:#3ebff7;}
.nav h3{ float:left; font-weight:normal; font-size:16px; height:80px; overflow:hidden; width:100%; text-align:center; }
.nav h3 a{ display:block;   /*line-height:54px;*/ font-size:16px;}
.clearfix{clear:both}
.nav .on{}
/*.nav .on h3 a{!* height:42px; line-height:42px; *!color:#fff; background-color:#107373;!*background:url(../images/top_bg.png) center bottom no-repeat;*!}*/
/*.nav li.on a:after{left: 1%;right: 1%;opacity: 1;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}
.nav li h3 a:after{content: "";display: block;position: absolute;left: 50%;right: 50%; margin-left:5px; margin-right:5px;bottom: -1px;height:4px;opacity: 0;background-color: #107373;-webkit-transition: all .5s;
-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}
.nav li h3 a:hover:after{left: 1%;right: 1%;opacity: 1;-webkit-transition: all .5s;-o-transition: all .5s;-ms-transition: all .5s;transition: all .5s;}*/
.nav .sub dl{ text-align:right; float:right; width:1000px;padding-left:20px}
.nav #m4 .sub dl{ width:560px;}
.nav #m5 .sub dl{ width:440px;}
.nav .sub dd{ float:left;vertical-align:middle; list-style:none; text-decoration:none; margin-right:6%;}


.i-warp{
  margin-top: -30px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 1.0;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.bottommain{
  background-image: url("../assets/image/beijing.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.neirong{
  height: 400px;
  width: 100%;
  /*background-image: url("../assets/image/beijing.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;*/
}
  .context{
    width: 100%;
    padding-left: 50px;
    font-weight:normal;
    color:#666666;
    /*background-image: url("../assets/image/beijing.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
    height: 80px;
    margin-top: -20px;
    padding-top: 20px;

  }
  .mainnr{
    height: 100%;
    width:95%;
    margin: 0 auto;
  }
  .mainleft{
    height:100%;
    width: 40%;
    float:left;
    text-align: center;
    padding-top: 30px;
  }
  .mainright{
    height:100%;
    width: 60%;
    float:left;
    padding-top: 50px;
  }
  .mainright ul li p{
    margin-top: 30px;
    font-family: 微软雅黑, "Microsoft YaHei";
    font-size: 16px;
    color:#666666;
  }
  .bottom{
    width: 100%;
    height: 40px;
    /*background-color: #2794ef;*/
    text-align: center;
  }
.bottoma{
  width: 80%;
  height: 3px;
  background-color: white;
  margin:0 auto;
  margin-bottom: 10px;
}
.show3{
  width: 100%;
}
  .imglist{
    margin: 40px 40px 40px 40px;
    display: inline-block;
    width: 250px;
    height: 250px;
    text-align: center;
  }
  .productInfoShow{
    padding: 30px 30px 30px 30px;
    position:fixed;
    top:100px;
    width: 70%;
    height:400px;
    margin-left: 300px;
    background-color: white;
    padding-top:3px;
    overflow-x:visible;
    z-index:10;
  }
  .lianxi{
    width: 99%;
    height: 200px;
  }
  .lxmap{
    width: 99%;
    height: 300px;
    text-align: center;
    margin-bottom: 30px;
  }

</style>
<style scoped>
  .blue{
    color:#3ebff7;
  }
</style>
